<template>
    <view class="list-chat">
        <!-- List item -->
         <view v-for="(item, index) in list" :key="index" class="list-item">
            <!--头像-->
            <image :src="item.userAvatar || item.groupAvatar" class="avatar"></image>
            <view class="content">
                <view class="name-wrap">
                    <text class="name">{{ item.nickName ||  item.groupName}}&nbsp;({{ item.beautifulNumber || item.groupBeautifulNumber }})</text>
                    <view v-if="item.nickName != null">
                        <text class="tag" v-if="item.sex != null">{{ item.sex == 1? '男' : '女' }}</text>
                        <text class="tag" v-if="item.birthday !=null">{{ age(item.birthday) }}岁</text>
                        <text class="tag" v-if="item.birthday != null">{{ constellation(item.birthday) }}</text>
                    </view>
                    <view v-else>
                        <text class="tag" v-if="item.currentNumber"><uni-icons type="person" size="12"></uni-icons>&nbsp;{{ item.currentNumber }}</text>
                        <text class="tag" v-if="item.maxNumber">可容纳{{ item.maxNumber }}人</text>
                        <text class="tag" v-if="item.currentNumber">{{ item.currentNumber }}个好友已加入</text>
                    </view>
                </view>
                <view class="add-btn-wrap">
                    <button class="add-btn" @tap="addOrJoin(item)">{{ item.nickName != null? '添加': '加入' }}</button>
                </view>
            </view>
         </view>
    </view>
</template>

<script setup>
import { age, constellation } from '../util/common';
defineProps({
	list: {
		type: Array,
		default: []
	}
})
//向父组件传值
const emit = defineEmits()
const addOrJoin = (item) => {
    emit('addOrJoin', item)
}
</script>

<style lang="scss" scoped>
.list-chat{
    display: flex;
    flex-direction: column;
    .list-item{
        display: flex;
        align-items: center;
        padding: 10px 0;
        color: #000000;
        .avatar{
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
        .content{
            display: flex;

            flex: 1;
            padding-bottom: 25rpx;
            border-bottom: 1px solid #eee;
            margin-left: 20rpx;
            .name-wrap{
                display: flex;
                flex-direction: column;
                
                .name{
                    margin-bottom: 10rpx;
                }
            }
            .tag{
                padding: 5px;
                border-radius: 5px;
                background-color: #f1f1f1;
                margin-left: 5px;
                font-size: 20rpx;
                color: #a8a8a8;
            }
            .add-btn-wrap{
                margin-left: auto;
                button{
                    width: 100rpx;
                    height: 50rpx;
                    line-height: 50rpx;
                    text-align: center;
                    border-radius: 5rpx;
                    font-size: 20rpx;
                    border: 1px solid #e3e3e3;
                }
            }
        }
    }
}
</style>